<template>
<div style="font-size: 12px;">
	<el-row v-for="(i,idxrowcount) in rowcount" :key="i" :gutter="24" style="margin-bottom: 10px"> 
		<el-col v-for="(i,idxcount) in count" :key="i" :xs="8" :sm="8" :md="8" :lg="8" :ref="colRef(idxcount,idxrowcount)">
			<div style="width:160px">
		　　		<img v-for="(i,idx) in items" :key="i" :src="image(idx,idxcount,idxrowcount)" />
				<div v-for="(i,idx) in items" :key="i" :style="position(idx,idxcount,idxrowcount)">
					<p>
						<span>
							{{formatNumber(idx,idxcount,idxrowcount)}}
						</span>
					</p>
				</div>												
			</div>					
		</el-col> 
	</el-row>	
</div>
</template>
<style>
</style>
<script>
	export default {
		name : 'switch-interface-used',
		props : {
			device: {
			type: Object,
			default: {}
        	},	
		},
	    mounted() {
	        console.log(this.$refs['col0']) // output: c-child
	    },
		computed:{
			count: function(){
				const count = [];
				for(let i = 0; i < parseInt(this.device.deviceSwitchSub.length/16); i ++) {
					count.push(i);
				}
				return count;
			},
			rowcount: function(){
				const rowcount = [];
				for(let i = 0; i < parseInt(this.count.length/3) + 1; i ++) {
					rowcount.push(i);
				}
				return rowcount;
			}
		},
		data () {
			return {
				items:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],
				index:0,
			}
		},
		methods:{
			image: function(idx,idxcount,idxrowcount){
				for(let i = 0; i < this.device.deviceSwitchSub.length; i++){
					if(i === this.index + idx) {
						let sub = this.device.deviceSwitchSub[i];
						let img = '';
						if(sub.state === '1') {
							img = '/static/images/DOWN.png';
						} else if (sub.state === '2') {
							img = '/static/images/UP.png';
						} else {
							img = '/static/images/UNPLUGIN.png';
						}
						return img;
					}
				}
			},
			colRef: function(idxcount,idxrowcount) {
				return 'col' + (idxrowcount * 48 + idxcount * 16);
			},
			position: function(idx,idxcount,idxrowcount){
				let o = {'position':'absolute'};
				let left = 0;
				if(idx > 8 || idxcount > 0) {
					left = 15 + idx%8 * 20 - 2 + 242.55 * idxcount
				} else {
					left = 15 + idx%8 * 20 + 242.55 * idxcount
				}
				o.left = left + 'px';
				o.top = (-7 + parseInt(idx/8) * 20) + 'px';
				return o;
			},
			formatNumber: function(idx,idxcount,idxrowcount){
				return 1 + idx + idxrowcount * 48 + idxcount * 16;
			}
		}
	}
</script>